<template>
  <div class="maintenan-out-frame">
    <Card class="maintenan-card">
      <template slot="title">
        <p>运维中心（岸基设施）</p>
      </template>
      <template slot="extra">
        <div class="title-content">
          <p>区域：</p>
          <Select size="small" v-model="selectMenu">
            <Option value="码头">码头</Option>
          </Select>
        </div>
      </template>
      <div class="maintenan-title-frame">
        <p>数据汇总</p>
        <Button type="primary" @click="clickMainInfo" icon="md-add">
          设备台账
        </Button>
      </div>
      <div class="maintenan-data">
        <Row :gutter="20">
          <i-col span="12">
            <maintenan-data-card :obj="equipObj"></maintenan-data-card>
          </i-col>
          <i-col span="12">
            <maintenan-data-card :obj="inspectionObj"></maintenan-data-card>
          </i-col>
        </Row>
        <Row :gutter="20" style="margin-top: 10px">
          <i-col span="7">
            <maintenan-data-card :obj="mainObj"></maintenan-data-card>
          </i-col>
          <i-col span="7">
            <maintenan-data-card :obj="abnormalObj"></maintenan-data-card>
          </i-col>
          <i-col span="10">
            <maintenan-data-card :obj="repairObj"></maintenan-data-card>
          </i-col>
        </Row>
      </div>
      <div class="maintenan-map-frame">
        <p>监控区域</p>
        <div class="maintenan-map">
          <Row :gutter="10">
            <i-col span="6" v-for="(item, index) in mapList" :key="index">
              <maintenan-map-card :obj="item"></maintenan-map-card>
            </i-col>
          </Row>
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
  import MaintenanDataCard from "../component/operate/MaintenanDataCard";
  import MaintenanMapCard from "../component/operate/MaintenanMapCard";
  export default {
    name: "MaintenanDataInfo",
    components: {MaintenanMapCard, MaintenanDataCard},
    data() {
      return {
        selectMenu: '码头',
        mapList: [],
        equipObj: {
          title: '设备资产管理数量（个）',
          img: require('../../assets/images/mainSet1.png'),
          backColor: 'rgb(231, 242, 252)',
          list: [
            {
              title: '总数量',
              data: 201
            },
            {
              title: '装卸类',
              data: 201
            },
            {
              title: '辅助类',
              data: 201
            },
            {
              title: '通信类',
              data: 201
            }
          ]
        },
        inspectionObj: {
          title: '巡检情况（个）',
          img: require('../../assets/images/mainSet5.png'),
          backColor: 'rgb(243, 238, 255)',
          list: [
            {
              title: '线路数',
              data: 50
            },
            {
              title: '站点数',
              data: 108
            },
            {
              title: '今日待执行',
              data: 50
            },
            {
              title: '今日已完成',
              data: 53
            }
          ]
        },
        mainObj: {
          title: '保养次数（次）',
          img: require('../../assets/images/mainSet4.png'),
          backColor: 'rgb(255, 247, 233)',
          list: [
            {
              title: '总次数',
              data: 201
            },
            {
              title: '本月待保养次数',
              data: 50
            }
          ]
        },
        abnormalObj: {
          title: '故障处理数量（个）',
          img: require('../../assets/images/mainSet3.png'),
          backColor: 'rgb(255, 238, 243)',
          list: [
            {
              title: '已处理',
              data: 201
            },
            {
              title: '待处理',
              data: 201
            }
          ]
        },
        repairObj: {
          title: '维修情况（个）',
          img: require('../../assets/images/mainSet2.png'),
          backColor: 'rgb(234, 248, 241)',
          list: [
            {
              title: '总数量',
              data: 201
            },
            {
              title: '维修中',
              data: 101
            },
            {
              title: '待维修',
              data: 100
            }
          ]
        }
      }
    },
    methods: {
      clickMainInfo() {
        this.$router.push({
          path: '/maintenan-info'
        })
      },
      getMapList(num) {
          this.mapList = [
            {
              title: '一号码头',
              img: require('../../assets/images/persional/mon1.jpeg'),
              path: '/view1'
            },
            {
              title: '二号码头',
              img: require('../../assets/images/persional/mon2.jpeg'),
              path: '/view1'
            },
            {
              title: '三号码头',
              img: require('../../assets/images/persional/mon3.jpeg'),
              name: 'view1'
            },
            {
              title: '四号码头',
              img: require('../../assets/images/persional/mon4.jpeg'),
              name: 'view1'
            },
            {
              title: '五号码头',
              img: require('../../assets/images/persional/mon5.jpeg'),
              name: 'view1'
            },
            {
              title: '六号码头',
              img: require('../../assets/images/persional/mon6.jpeg'),
              name: 'view1'
            },
            {
              title: '七号码头',
              img: require('../../assets/images/persional/mon7.jpeg'),
              name: 'view1'
            },
            {
              title: '八号码头',
              img: require('../../assets/images/persional/mon8.jpeg'),
              name: 'view1'
            }
          ]
      }
    },
    mounted() {
      this.getMapList(8);
    }
  }
</script>

<style lang="less" scoped>
  @import "../styles/common";

  /deep/ .maintenan-card .ivu-card-extra {
    display: flex;
    width: 200px;
    top: 5px;
    padding-left: 40px;
  }

  /deep/ .maintenan-card .ivu-card-head p {
    font-size: 18px;
  }

  .maintenan-out-frame {
    margin-top: 125px;
    margin-bottom: 30px;
    width: 100%;
    .maintenan-card {
      width: 1200px;
      margin: 0 auto;
      .title-content {
        display: flex;
        width: 150px;
        margin-top: 10px;
        justify-content: space-between;
        p {
          width: 80px;
          font-size: 14px;
          margin-top: 2px;
        }
      }
      .maintenan-title-frame {
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        margin-top: 20px;
        p {
          font-weight: bold;
          font-size: 16px;
        }
      }
      .maintenan-data {
        width: 100%;
        margin-top: 10px;
      }
    }
    .maintenan-map-frame{
      margin-top: 40px;
      p {
        font-weight: bold;
        font-size: 16px;
      }
      .maintenan-map {
        margin-top: 20px;
      }
    }
  }
</style>
